<template>
  <div class="main">
    <data-table ref="dataTable" :props="dataTableProps">
      <template #params>
        <el-form-item prop="username" label="员工名称">
          <el-input v-model="dataTableProps.params.username" clearable/>
        </el-form-item>
        <el-form-item prop="mobile" label="手机号码">
          <el-input v-model="dataTableProps.params.mobile" clearable/>
        </el-form-item>
      </template>
      <template #data="{onEdit,onDel}">
        <el-table-column prop="username" label="登录账号"/>
        <el-table-column prop="nickname" label="员工名称"/>
        <el-table-column prop="mobile" label="手机号码"/>
        <el-table-column prop="name" label="当前角色">
          <template slot-scope="{row}">
            {{ row.roleList.join(',') }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{row}">
            <el-switch v-model="row.status===2" @change="setIsDisabled(row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="onEdit(row)">修改</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="onDel(row)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </data-table>

    <add-edit-dialog :visible.sync="addEditVisible" :row="addEditRow"/>
  </div>
</template>

<script>
  import staffApi from '@/api/staff'
  import AddEditDialog from './components/AddEditDialog'
  import listMixin from '@/mixins/listMixin'

  export default {
    name: 'staff',
    mixins: [listMixin],
    components: {
      AddEditDialog
    },
    data() {
      return {
        dataTableProps: {
          params: {
            username: '',
            mobile: ''
          },
          apiModule: staffApi
        },
        addEditVisible: false,
        addEditRow: null
      }
    },
    methods: {
      setIsDisabled({ id, status }) {
        if (status === 1) {
          staffApi.forbidden({ id, reason: '' }).then(res => {
            this.$refs.dataTable.getDataList()
            this.$notify({
              title: '成功',
              message: '禁用成功',
              type: 'success'
            })
          })
        } else {
          staffApi.liftBan({ id }).then(res => {
            this.$refs.dataTable.getDataList()
            this.$notify({
              title: '成功',
              message: '启用成功',
              type: 'success'
            })
          })
        }
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>

</style>
